import useTableList from '@/utils/useTableList';
import { PageContainer } from '@ant-design/pro-components';
import { Button, Col, Flex, Form, Input, Row, Select, Space, Table, Tag } from 'antd';
import React, { useState } from 'react';
import styles from './index.less';
import { ReloadOutlined, SearchOutlined } from '@ant-design/icons';
import { ColumnsType } from 'antd/es/table';
import dayjs from 'dayjs';
import { getUserListApi } from '@/services/system';
import CommunicateModal from './CommunicateModal';

const Company: React.FC = () => {
  const { loading, form, datasource, page, pageSize, total, onFinish, onPageChange } = useTableList(
    { fetchApi: getUserListApi },
  );

  const [item, setItem] = useState<any>(null);

  const columns: ColumnsType<any> = [
    {
      title: '用户ID',
      dataIndex: 'id',
      key: 'id',
      width: 200,
    },
    {
      title: '姓名或昵称',
      dataIndex: 'username',
      key: 'username',
    },
    {
      title: '公司名称',
      dataIndex: 'companyName',
      key: 'companyName',
    },
    {
      title: '部门职位',
      dataIndex: 'position',
      key: 'position',
      width: 200,
    },
    {
      title: '注册类型',
      dataIndex: 'registerType',
      key: 'registerType',
      width: 100,
      render: (text) => {
        return text === 1 ? '个人' : '公司';
      },
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone',
      width: 150,
    },
    {
      title: '邮箱',
      dataIndex: 'mail',
      key: 'mail',
      width: 200,
    },
    {
      title: '省份',
      dataIndex: 'provinceName',
      key: 'provinceName',
      width: 150,
    },
    {
      title: '城市',
      dataIndex: 'cityName',
      key: 'cityName',
      width: 150,
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
      width: 250,
    },
    {
      title: '主营产品',
      dataIndex: 'product',
      key: 'product',
      width: 250,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 150,
      render: (status: number) => {
        if (status === 0) {
          return <Tag color="gray">禁用</Tag>;
        } else {
          return <Tag color="green">启用</Tag>;
        }
      },
    },
    {
      title: '地图状态',
      dataIndex: 'joinMapStatus',
      key: 'joinMapStatus',
      width: 150,
      render: (status: number) => {
        if (status === 0) {
          return <Tag color="gray">待审核</Tag>;
        } else if (status === 1) {
          return <Tag color="green">已通过</Tag>;
        } else {
          return <Tag color="red">已拒绝</Tag>;
        }
      },
    },
    {
      title: '上次登录时间',
      dataIndex: 'lastLoginTime',
      key: 'lastLoginTime',
      width: 200,
      render: (time: number) => {
        return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
      },
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      key: 'updateTime',
      width: 200,
      render: (time: number) => {
        return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: 200,
      render: (time: number) => {
        return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
      },
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      width: 150,
      align: 'center',
      fixed: 'right',
      render: (_, row) => {
        return (
          <Space>
            <Button
              type="primary"
              size="small"
              onClick={() => {
                setItem(row);
              }}
            >
              填写沟通记录
            </Button>
          </Space>
        );
      },
    },
  ];

  return (
    <PageContainer>
      <Row gutter={[30, 30]} style={{ padding: '15px 30px' }}>
        <div className={styles.search_box}>
          <Form
            form={form}
            onFinish={onFinish}
            onReset={() => onFinish({})}
            labelCol={{
              span: 5,
            }}
            style={{ width: '100%' }}
          >
            <Row gutter={[20, 20]}>
              <Col xs={24} sm={24} md={12} lg={12} xl={8} xxl={6}>
                <Form.Item label="搜索内容" name="searchText">
                  <Input placeholder="输入用户ID/用户名/手机号/邮箱" />
                </Form.Item>
              </Col>
              <Col xs={24} sm={24} md={12} lg={12} xl={8} xxl={6}>
                <Form.Item label="注册类型" name="registerType">
                  <Select
                    options={[
                      {
                        value: 1,
                        label: '个人',
                      },
                      {
                        value: 2,
                        label: '企业',
                      },
                    ]}
                    placeholder="请选择"
                    allowClear
                  />
                </Form.Item>
              </Col>
              <Col xs={24} sm={24} md={12} lg={12} xl={8} xxl={6}>
                <Form.Item label="状态" name="status">
                  <Select
                    options={[
                      {
                        value: 0,
                        label: '禁用',
                      },
                      {
                        value: 1,
                        label: '启用',
                      },
                    ]}
                    placeholder="请选择"
                    allowClear
                  />
                </Form.Item>
              </Col>
              <Col xs={24} sm={24} md={12} lg={12} xl={8} xxl={6}>
                <Form.Item label="地图状态" name="joinMapStatus">
                  <Select
                    options={[
                      {
                        value: 0,
                        label: '待审核',
                      },
                      {
                        value: 1,
                        label: '已通过',
                      },
                      {
                        value: 2,
                        label: '已拒绝',
                      },
                    ]}
                    placeholder="请选择"
                    allowClear
                  />
                </Form.Item>
              </Col>
              <Col xs={24} sm={24} md={24} lg={24} xl={16} xxl={24}>
                <Flex align="center" justify="flex-end" gap={15}>
                  <Button type="primary" icon={<SearchOutlined />} htmlType="submit">
                    查询
                  </Button>
                  <Button htmlType="reset" icon={<ReloadOutlined />}>
                    重置
                  </Button>
                </Flex>
              </Col>
            </Row>
          </Form>
        </div>
        <div className={styles.table_box}>
          <Table
            columns={columns}
            dataSource={datasource}
            loading={loading}
            rowKey="id"
            scroll={{ x: 3100 }}
            pagination={{
              current: page,
              pageSize: pageSize,
              total: total,
              showSizeChanger: false,
              showQuickJumper: true,
              onChange: onPageChange,
              showTotal: (total) => `共 ${total} 条数据`,
            }}
          />
        </div>
      </Row>
      <CommunicateModal item={item} open={!!item} onClose={() => setItem(null)} />
    </PageContainer>
  );
};

export default Company;
